<script setup lang="ts">
import { addOnePerm } from '@/api/auth';
import type { Perm } from '@/api/auth/type';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';


const onShow = defineModel("onShow");

const formData = ref({} as Perm);

const onSubmit = () => {
    addOnePerm(formData.value).then((res) => {
        if (res.code === 5100) {
            onShow.value = false;
            ElMessage.success(res.msg);
        } else {
            ElMessage.error("错误码:"+res.code+"\n错误信息: "+res.msg);
        }
    });
    onShow.value = false;
}

</script>

<template>
    <div class="content">
        <el-dialog v-model="onShow" title="添加权限" width="500">
            <el-form :model="formData" label-width="auto" style="max-width: 600px">
                <el-form-item label="权限名">
                    <el-input v-model="formData.name" />
                </el-form-item>
                <el-form-item label="权限编码">
                    <el-input v-model="formData.code" />
                </el-form-item>
                <el-form-item label="权限路径">
                    <el-input v-model="formData.path" />
                </el-form-item>
                <el-form-item label="权限级别">
                    <el-input v-model="formData.level" />
                </el-form-item>
            </el-form>
            <div class="row">
                <el-button @click="onSubmit()" type="primary">提交</el-button>
                <el-button @click="onShow = false" type="primary">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.content {
    background-color: white;
    padding: 1%;
    .header {
        padding: 1%;
    }
}
.row {
    display: flex;
    justify-content: center;
}
</style>